<template>
	<view>
		<div class="box">
			<div ref="lp_box" class="lp_box">
				<div class="sector" v-for="item in list" :style="[{'transform': `rotate(${item.start}deg)`}]" >
					<div class="sector-inner" :style="{'background':item.bg,'transform':` translateX(-273rpx) rotate(${item.childDeg}deg)`}">
						<div class="content"  :style="{'width':item.textWidth+'rpx','transform': `translate(-${item.textTranslateX}rpx,-${item.textTranslateY}rpx) rotate(-${item.textDeg}deg)`}">
							<span :style="{'color':cssData.textColor}">{{item.level}}</span>
							<image :src="formatImage(item)" mode="widthFix"></image>
						</div>
						<div></div>
					</div>
				</div>
			</div>
			<div class="light_box">
				<!-- <image v-if="lightStyle==1" src="@/static/turnTable/bg.png" mode=""></image>
				 -->
				<image class="bg1" v-if="lightStyle==1" :src="qiniuUrl+'bg1.png'"></image>
				<div v-else>
					<div class="light1"></div>
					<div class="light2"></div>
					<div class="light3"></div>
					<div class="bigger" :class="{'start_animation':isStartAnimation}" v-for="(item,index) in cssData.lightNum" :style="{'transform':`rotate(${index*30}deg)`}"></div>
					<div class="small" :class="{'start_animation':isStartAnimation}" v-for="(item,index) in cssData.lightNum" :style="{'transform':`rotate(${index*30}deg)`}"></div>
				</div>
			</div>
			<div class="start" @click="start">
				<image :src="qiniuUrl+'zhen.png'" mode="widthFix"></image>
				<div class="text">
					<image :class="{'otherHeight':status==2}" :src="startImg" mode="heightFix"></image>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {checkImage} from '@/until/QFH5.js'
	import {mapGetters} from 'vuex'
	export default{
		props:{
			prizeList:{
				type:Array,
				default:()=>{
					let arr = [
						{id:0,title:'谢谢惠顾'},
						{id:1,title:'一等奖'},
						{id:2,title:'二等奖'},
						{id:3,title:'三等奖'},
					]
					return arr
				}
				
			},
			//必开奖
			prize:{
				type:Number,
				default:-1
			},
			status:{
				type:Number,
				default:0
			}
		},
		computed:{
			startImg(){
				switch(this.status){
					case 0:return this.qiniuUrl+'act_start.png'
					case 1:return this.qiniuUrl+'act_end.png'
					case 2:return this.qiniuUrl+'start_text.png'
				}
			},
			...mapGetters({qiniuUrl:'qiniuUrl'})
		},
		data(){
			return{
				list:[],
				cssData:{
					width:546,
					r:273,
					color:['#FFF9EB','#FEE4CD'],
					textColor:['#F8231C'],
					lightNum:12,
				},
				timerRun:null,
				isStartAnimation:false,//爆灯动画
				lightStyle:2,//爆灯样式
				prizeIndex:-1
			}
		},
		methods:{
			formatImage(data){
				console.log(checkImage(data.type,data.image))
				return checkImage(data.type,data.image)
			},
			start(){
				this.$emit('start')
			},
			startAnimation(){
				let _this = this
				let result = Math.floor(Math.random()*10 + 1)*360
				result = result<1080?1080:result
				let deg = 0
				let power = 1
				let dom = this.$refs.lp_box
				let timer = setInterval(()=>{
					if(power<30){
						power = power*1.01
					}
					deg+=power
					// console.log(power,deg)
					if(deg>=result || deg>=result-30){
						console.log('ding',this.prize)
						_this.prizeList.forEach((item,index)=>{
							if(item.id==_this.prize)
							_this.prizeIndex = index
						})
						console.log(_this.prizeIndex)
						if(_this.prizeIndex>-1){
							clearInterval(timer)
							_this.resetLp()
							_this.startTurn()
						}else{
							result+=360
						}
					}
					
					dom.style.transform = 'rotate('+ deg +'deg)'
				},10)
			},
			startTurn(){
				if(this.timerRun){
					uni.showToast({
						title: '开奖中···',
						duration: 1500,
						icon: "none"
					});
					return
				}
				let dom = this.$refs.lp_box
				this.timerRun = true;
				let attenuation = 0.01; // 衰退
				let random = Math.floor(Math.random()*100 + 1)
				let power = 0
				
				if(this.prizeIndex>=0){
					let allDeg = random*100-1
					let resDeg = allDeg%360
					let resCount = allDeg - resDeg
					resCount = resCount<1080?1080:resCount
					let toDegend =360- this.list[this.prizeIndex].end
					let pix = 360/this.list.length
					let randomDeg = Math.floor(Math.random()*pix + 1)
					power = (resCount + toDegend + randomDeg)/100
				}else{
					power = random>10?random:15;
				}
				let deg = 0;
				this.isStartAnimation = true
				let timer = setInterval(()=>{
					deg+=power
					if(power<= 0){
						this.timerRun = false
						clearInterval(timer)
						this.openPrize(deg)
					}
					dom.style.transform = 'rotate('+ deg +'deg)'
					power= (power - power*attenuation) < attenuation?0:power - power*attenuation;
				},10)
			},
			openPrize(val){
				this.isStartAnimation = false
				let prize = 0
				let resultDeg = 360-val%360
				this.list.forEach(item=>{
					if(item.start<resultDeg && resultDeg<item.end){
						prize = item
					}
				})
				this.$emit('back',prize)
				this.prizeIndex = -1
				
			},
			resetLp(){
				let dom = this.$refs.lp_box
				dom.style.transform = 'rotate('+ 0 +'deg)'
			},
			initDom(){
				let keyData = ['一','二','三','四','五','六','七','八','九','十','十一','十二','十三','十四']
				let circle = 360
				let pin = circle/this.list.length
				let {width,color} =  this.cssData
				let circleR = width/2
				this.list.forEach((item,index)=>{
					item.start = index*pin
					item.end = (index+1)*pin
					item.childDeg =item.end- item.start
					item.bg = index%2==0?color[0]:color[1]
					item.textDeg = 90-(180-pin)/2
					item.textWidth =Math.sin(Math.PI*pin/360)*circleR*2;
					item.textHeight =Math.cos(Math.PI*pin/360)*circleR;
					let otherLength = circleR -item.textHeight
					item.textTranslateX =otherLength*Math.cos(2*Math.PI*(90-pin/2)/360)
					item.textTranslateY = otherLength*Math.sin(2*Math.PI*(90-pin/2)/360)
					item.name = keyData[index]+'等奖'
					
					if(item.id==0){
						item.name="谢谢参与"
						item.level = item.hasOwnProperty('text')?item.text: '祝你好运'
					}	
				})
			}
		},
		created() {
			// 30`  Math.sin(30*Math.PI/180)
			// this.list = this.prizeList
		},
		watch:{
			prizeList:{
				handler(newVal,oldVal){
					if(newVal!=null){
						this.list = newVal
						this.initDom()
					}
					
				},
				deep:true,
				immediate:true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		position: relative;
		width: 750rpx;
		height: 750rpx;
		margin: 0 auto;
		overflow: hidden;
		.lp_box{
			width: 546rpx;
			height: 546rpx;
			position: absolute;
			top: 102rpx;
			left: 102rpx;
			z-index: 14;
			transform-origin: 274rpx 274rpx;
			// animation: turn 1.5s linear infinite;
		}
		.light_box{
			line-height: 0;
			.bg{
				margin:-16rpx 0 0 -15rpx;
				width: 729rpx;
				height: 952rpx;
			}
			.bg1{
				margin:-16rpx 0 0 -15rpx;
				width: 729rpx;
				height: 730rpx;
			}
			width: 700rpx;
			height: 700rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			background: linear-gradient(180deg, #E82124 25%, #FD9265 50%,#E82124 75%);
			border-radius: 50%;
			z-index: 9;
			.light1,.light2{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				width: 650rpx;
				height: 650rpx;
				border-radius: 50%;
				background: linear-gradient(180deg, #FE4848 17%, #FD9265 50%,#FE4848 83%);
				z-index:9;
			}
			.light2{
				width: 560rpx;
				height: 560rpx;
				background: #E20A0A;
				z-index:10;
			}
			.bigger,.small{
				position:absolute;
				height: 30rpx;
				width: 30rpx;
				border-radius: 50%;
				top: 29rpx;
				left: 335rpx;
				background-color: #fafce7;
				transform-origin: 16rpx 320rpx;
				z-index: 11;
			}
			.small{
				height: 14rpx;
				width: 14rpx;
				top: 4rpx;
				left: 342rpx;
				transform-origin: 8rpx 346rpx;
			}
			
		}
		.start{
			width: 170rpx;
			height: 208rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			line-height: 0;
			z-index: 15;
			&>image{
				width: 170rpx;
				height: 208rpx;
				margin-top: -20rpx;
			}
			.text{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				line-height: 0;
				&>image{
					// width: 110rpx;
					height: 110rpx;
				}
				.otherHeight{
					height: 116rpx;
				}
				
			}
		}
	}
	
	.sector {
		position: absolute;
		width: 273rpx;
		height: 100%;
		top:0;
		left: 274rpx;
		border-radius: 0rpx 273rpx 273rpx 0;
		overflow: hidden;
		transform-origin: 0 274rpx;
	
		
		.sector-inner {
			
			text-align: center;
			display: block;
			width: 273rpx;
			height: 100%;
			line-height: 150rpx;
			text-align: right;
			transform-origin: 273rpx 274rpx;
			border-radius: 273rpx 0 0 273rpx;
			overflow: hidden;
			position: relative;
			// border-right: 1rpx solid rgba(0,0,0,.1);
			.content {
				position: absolute;
				right: 0;
				top: 0;
				height: 273rpx;
				text-align: center;
				display: block;
				transform-origin: 100% 0%;
				transform: rotate(-0deg);
				color: #fff;
				line-height: 0;
				&>span{
					margin-top: 30rpx;
					padding: 0 20%;
					display: block;
					// margin-left:15%;
					// width: 70%;
					// height: 64rpx;
					line-height: 32rpx;
					font-size: 32rpx;
				}
				&>image{
					width: 60%;
					max-width:120rpx;
					margin: 10rpx auto 0;
				}
			}
		}
		
	}
	.start_animation {
		animation: 1s twinkling 3, 100ms 3s twinkling 3;
	}
	@keyframes turn{
		0%{-webkit-transform:rotate(0deg);}
		25%{-webkit-transform:rotate(90deg);}
		50%{-webkit-transform:rotate(180deg);}
		75%{-webkit-transform:rotate(270deg);}
		100%{-webkit-transform:rotate(360deg);}
	}
	@keyframes twinkling {
		0% { background:  #FF7863; }
		25% { background: #FD8C63; }
		50% { background: #fafce7; }
		75% { background: #FD8C63; }
		99% { background: #fafce7; }
	}
</style>